<template>
    <div class="container">
        <el-form :model="form" label-width="100px" class="form-container">
            <h1 class="form-title">个人信息</h1>
            <el-form-item label="ID:">
                <el-input v-model="form.id" placeholder="输入内容..."></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
                <el-input v-model="form.email" placeholder="输入内容..."></el-input>
            </el-form-item>
            <el-form-item label="爱好:">
                <el-input v-model="form.nickname" placeholder="输入内容..."></el-input>
            </el-form-item>
            <el-form-item label="出生年月:">
                <el-date-picker v-model="form.birthdate" type="date" placeholder="选择日期"
                    style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="性别:">
                <el-radio-group v-model="form.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="个性签名:">
                <el-input v-model="form.signature" type="textarea" :rows="4" placeholder="输入内容..."></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" class="submit-button">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import {
    ElForm,
    ElFormItem,
    ElInput,
    ElDatePicker,
    ElRadioGroup,
    ElRadio,
    ElButton,
    ElNotification
} from 'element-plus'
const form = ref({
    id: '胸脯',
    email: '1928473629@163.com',
    nickname: '体育、游戏',
    birthdate: '2000-10-09',
    gender: '男',
    signature: '生如夏花之绚烂，死如秋叶之静美'
})


const onSubmit = () => {
  // 直接使用字符串作为 message 参数
  ElNotification({
    title: '保存成功',
    message: '去康康视频吧~',
    type: 'success' // 可选，用于指定通知的类型
  });
  console.log('表单提交:', form.value);
  // 这里通常会发送表单数据到服务器
};
</script>

<style scoped>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

.form-container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.submit-button {
    width: 100%;
}

@media (max-width: 768px) {
    .form-container {
        max-width: 90%;
    }
}
</style>